<template>
  <div class="main">
    <div class="main-container">
      <!-- 采用组件切换的模式 -->
      <template v-if="!isRouter">
        <keep-alive>
          <component ref="currPage" v-if="keepAlive && refreshFlag" :is="currPage"></component>
        </keep-alive>
        <component ref="currPage" v-if="!keepAlive && refreshFlag" :is="currPage"></component>
      </template>

      <!-- 采用路由方式 -->
      <template v-if="isRouter">
        <keep-alive>
          <router-view v-if="keepAlive && refreshFlag" name="content"></router-view>
        </keep-alive>
        <router-view v-if="!keepAlive && refreshFlag" name="content"></router-view>
      </template>
    </div>
  </div>
</template>

<script>
export default {

  props: {
    keepAlive: {
      default: false,
      type: Boolean
    },
    refreshFlag: {
      default: true,
      type: Boolean
    },
    isRouter: {
      default: true,
      type: Boolean
    }
  },
  data () {
    return {
    }
  },

  methods: {}
}

</script>
<style lang='scss' scoped>
.main {
  background-color: #f5f5f5;
  flex-grow: 1;
  overflow-y: auto;
  overflow-x: hidden;
  .main-container {
    padding: 16px;
  }
}
</style>
